<template>
	<view class="list-scope" :class="'list-' + grid" v-if="wrapMode === 'wrap'">
		<view class="row1-item" v-if="grid == 'row1'">
			<template v-if="activityType === 'seckill'">
				<Row1Seckill @click="clickItem(item)" :info="item" v-for="(item, index) in list" />
			</template>
			<Row1 theme="theme-1" @click="clickItem(item)" :class="grid" v-for="(item, index) in list" :info="item" v-else />
		</view>
		<template v-if="grid == 'grid1'">
			<Grid1 theme="theme-1" @click="clickItem(item)" :class="grid" v-for="(item, index) in list" :info="item"/>
		</template>
		<template v-else-if="grid == 'grid2'">
			<Grid2  @click="clickItem(item)" :class="grid" v-for="(item, index) in list" :info="item"/>
		</template>
		<template v-else-if="grid == 'grid3'">
			<Grid3 theme="theme-1" @click="clickItem(item)" :class="grid" v-for="(item, index) in list" :info="item"/>
		</template>
	</view>
	<scroll-view scroll-x class="scroll-list" :class="grid" v-else-if="wrapMode === 'scroll'">
		<template v-if="grid == 'row1'">
			<Row1 theme="theme-1" @click="clickItem(item)" :class="grid" v-for="(item, index) in list" :info="item"/>
		</template>
		<template v-if="grid == 'grid1'">
			<Grid1 theme="theme-1" @click="clickItem(item)" :class="grid" v-for="(item, index) in list" :info="item"/>
		</template>
		<template v-else-if="grid == 'grid2'">
			<!-- <Grid2  @click="clickItem(item)" :class="grid" v-for="(item, index) in list" :info="item"/> -->
			<view class="top-swiper" >
				 <view class="box">
					<swiper class="swiper" :previous-margin="swiper.margin" autoplay="true" interval="2000"
					:next-margin='swiper.margin' 
					:circular="true" @change="swiperChange">
						<swiper-item v-for="(info,index) in list" :key="index">
							
							<view class="le-img" :class="{'le-active':swiper.index == index}">
								<view class="item-container grid2"  hover-class="hover" @tap="clickItem(info)">
									<view class="thumb-c">
										<image class="p-tag" :class="'location-' + info.image_tag.location" :src="info.image_tag.image" v-if="info.image_tag"></image>
										<image mode="aspectFill" :src="info.thumb + '?x-oss-process=image/resize,w_300'" class="thumb"></image>
										<view class="presell-c" v-if="info.is_presell">预售</view>
									</view>
									<view class="body">
										<view class="title">{{info.title}}</view>
										<view class="price" v-show="false">
											<text class="unit">￥</text>
											<text class="number">{{(info.money_price/100).toFixed(0)}}</text>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper> 
				 </view>
			</view>
		</template>
		<template v-else-if="grid == 'grid3'">
			<!-- <Grid3 theme="theme-1" @click="clickItem(item)" :class="grid" v-for="(item, index) in list" :info="item"/> -->
			<view class="top-swiper-1" >
				 <view class="box">
					<swiper class="swiper" :previous-margin="swiper.margin" autoplay="true" interval="3000"
					:next-margin='swiper.margin' 
					:circular="true" @change="swiperChange">
						<swiper-item v-for="(info,index) in list" :key="index">
							
							<view class="le-img" :class="{'le-active':swiper.index == index}">
								<view class="item-container grid2"  hover-class="hover" @tap="clickItem(info)">
									<view class="thumb-c">
										<image class="p-tag" :class="'location-' + info.image_tag.location" :src="info.image_tag.image" v-if="info.image_tag"></image>
										<image mode="aspectFill" :src="info.thumb + '?x-oss-process=image/resize,w_300'" class="thumb"></image>
										<view class="presell-c" v-if="info.is_presell">预售</view>
									</view>
									<view class="body">
										<view class="title">{{info.title}}</view>
										<view class="price" v-show="false">
											<text class="unit">￥</text>
											<text class="number">{{(info.money_price/100).toFixed(0)}}</text>
										</view>
									</view>
								</view>
							</view>
							
							
							<!-- <image class='le-img' :src='item' :class="{'le-active':swiper.index == index}"></image> -->
						</swiper-item>
					</swiper> 
				 </view>
			</view>
		</template>
	</scroll-view>
</template>

<script>
	import Row1 from "@/components/ActivityItem/Row1.vue"
	import Grid1 from "@/components/ActivityItem/Grid1.vue"
	import Grid2 from "@/components/ActivityItem/Grid2.vue"
	import Grid3 from "@/components/ActivityItem/Grid3.vue"
	import Row1Seckill from "@/components/ActivityItem/Row1Seckill.vue"
	
	export default {
		props: {
			ids: {
				type: Array
			},
			module: {
				type: Object,
				default () {
					return {}
				}
			},
			refreshCounter: Number,
			getNextPageCounter: Number
		},
		components: {
			Row1,
			Grid1,
			Grid2,
			Grid3,
			Row1Seckill
		},
		data() {
			return {
				page: 1,
				list: [],
				swiper: {
					margin: "230rpx",
					index: 0,
					list: [
						"https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/other/EtTEark5htiS90BlayXUNegWn7SbJ5RA8sVv5x9W.jpg",
						"https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/other/EtTEark5htiS90BlayXUNegWn7SbJ5RA8sVv5x9W.jpg",
						"https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/other/EtTEark5htiS90BlayXUNegWn7SbJ5RA8sVv5x9W.jpg",
						"https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/other/EtTEark5htiS90BlayXUNegWn7SbJ5RA8sVv5x9W.jpg",
						"https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/other/EtTEark5htiS90BlayXUNegWn7SbJ5RA8sVv5x9W.jpg",
						"https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/other/EtTEark5htiS90BlayXUNegWn7SbJ5RA8sVv5x9W.jpg",
						"https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/other/EtTEark5htiS90BlayXUNegWn7SbJ5RA8sVv5x9W.jpg",
						"https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/other/EtTEark5htiS90BlayXUNegWn7SbJ5RA8sVv5x9W.jpg",
					]
				}
			}
		},
		mounted() {
			this.initData()
		},
		computed: {
			isScroll() {
				return this.module.display == 'scroll'
			},
			grid() {
				return this.module.grid || 'grid3'
			},
			wrapMode() {
				return this.module.wrap_mode  || 'wrap'
			},
			url () {
				// console.log('type ====', this.module.activity_type)
			  let map  = {
			    yifanshang: '/yifanshangs',
				lottery: '/lotteries',
				seckill: '/seckills',
				egg_lottery: '/egg-lotteries',
				jika: '/jikas',
				fudai: '/fudais',
				rotate_lottery: '/rotate-lotteries',
				box: '/boxes',
				zhuli: '/zhuli/activities'
			  }
			  return map[this.module.activity_type]
			},
			activityType () {
				return this.module.activity_type || ''
			}
		},
		watch: {
			ids () {
				this.initData()
			},
			refreshCounter () {
				this.initData()
			},
			getNextPageCounter (val) {
				if (this.module.list_content === 'all') {
					this.getNextPage()
				}
			}
		},
		methods: {
			initData() {
				if (this.module.list_content === 'all') {
					this.page = 1
					
					this.$http(this.url, 'GET', {
						page: this.page,
						per_page: 12
					}).then(res => {
						this.list = res.data.list
					})
				}
				else if (this.module.list_content === 'by_category') {
					let categoryIds = this.module.category_ids || []
					this.$http(this.url, 'GET', {
						page: this.page,
						per_page: 12,
						cateogry_ids: categoryIds
					}).then(res => {
						this.list = res.data.list
					})
				}
				else  {
					if (this.ids && this.ids.length > 0) {
						this.$http(this.url, 'GET', {
							per_page: 100,
							ids: this.ids
						}).then(res => {
							this.list = res.data.list
						})
					}
				}
			},
			clickItem (item) {
				// this.$playAudio('click')
				
				let url = ''
				if (item.activity_type === 'yifanshang') {
					url = `/pages/yifanshang/detail?uuid=${item.uuid}`
				}
				else if (item.activity_type === 'lottery') {
					url = `/pages/lottery/detail?uuid=${item.uuid}`
				}
				else if (item.activity_type === 'egg_lottery') {
					url = `/pages/eggLottery/detail?uuid=${item.uuid}`
				}
				else if (item.activity_type === 'seckill') {
					url = `/pages/seckill/detail?uuid=${item.uuid}`
				}
				else if (item.activity_type === 'jika') {
					url = `/pages/jika/detail?uuid=${item.uuid}`
				}
				else if (item.activity_type === 'fudai') {
					url = `/pages/fudai/detail?uuid=${item.uuid}`
				}
				else if (item.activity_type === 'rotate_lottery') {
					url = `/pages/rotateLottery/detail?uuid=${item.uuid}`
				}
				else if (item.activity_type === 'box') {
					url = `/pages/boxDetail/index?uuid=${item.uuid}`
				}
				else if (item.activity_type === 'zhuli') {
					url = `/pages/zhuli/detail?uuid=${item.uuid}`
				}
				
				uni.navigateTo({
					url: url
				})
				
			},
			getNextPage() {
				this.page++
				// console.log('get next page')
				
				this.$http(this.url, 'GET', {
					page: this.page,
					per_page: 12
				}).then(res => {
					this.list = this.list.concat(res.data.list)
				})
			},
			
			swiperChange(e) {
				this.swiper.index = e.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-scope {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;
		
		&.list-grid3 {
			// justify-content: flex-start;
			// justify-content: space-around;
		}
		
		.row1-item {
			width: 100%;
		}
		
		.row1 {
			width: 100%;
		}
		
		.grid1 {
			flex: 0 0 100%;
			width: 100%;
		}
		
		.grid2 {
			width: 48%;
		}

		.grid3 {
			width: 31%;
			// flex: 0 0 31%;
			
			// overflow: hidden;
			// border: 5px solid red;
			// margin-right: 20rpx;
			// display: inline-block;
			// &:nth-child(3n) {
			// 	margin-right: 0rpx;
			// }
		}
	}
	
	.scroll-list {
		
		white-space:nowrap;
		
		// border: 1px solid red;
		
		.grid1 {
			margin-right: 20rpx;
			display: inline-block;
			width: 80%;
		}
		
		.grid2 {
			// margin: 0rpx 10rpx;
			display: inline-block;
			// width: 52%;
		}
		
		.row1 {
			margin-right: 30rpx;
			display: inline-block;
			width: 90%;
		}
	
		.grid3 {
			width: 34%;
			margin-right: 20rpx;
			display: inline-block;
		}
		
		
		
		.top-swiper{
			// .box{
			// 	padding-top: var(--status-bar-height);
			// 	box-sizing: content-box;
			// 	position: absolute;
			// 	z-index: 5;
			// 	top: 0;
			// 	left: 0;
			// 	width: 100%;
			// 	height: auto;
			// }
			
			.swiper {
				height: 300rpx;
				margin: 0 20rpx;
			
				.le-img {
					width: 100%;
					height: 100%;
					// width: 300rpx;
					// height: 300rpx;
					display: block;
					transform: scale(0.9);
					transition: transform 0.3s ease-in-out 0s;
					border-radius: 4px;
					
					.item-container {
						width: 220rpx;
						height: 280rpx;
						border: 2px solid #fff;
						border-radius: 10rpx;
						box-sizing: border-box;
						overflow: hidden;
						box-shadow: 0px 14px 30px 0px rgba(226, 222, 204, 0.4);
						position: relative;
						background-color: #000;
						// position: relative;
						.thumb-c {
							position: relative;
							.thumb {
								width: 100%;
								border-radius: 10rpx;
								height: 280rpx;
								display: block;
							}
							
							.presell-c {
								position: absolute;
								width: 100%;
								text-align: center;
								background: rgba(230, 49, 17, 0.5);
								color: white;
								left: 0rpx;
								bottom: 0rpx;
								font-size: 24rpx;
								padding: 6rpx 0rpx;
							}
							
							.p-tag {
								position: absolute;
								width: 100rpx;
								height: 100rpx;
								top: 0rpx;
								
								// 右上角
								&.location-1 {
									right: 0rpx;
								}
								
								// 右上角
								&.location-2 {
									left: 0rpx;
								}
							}
						}
						
					
						.body {
							width: 220rpx;
							position: absolute;
							bottom: 0rpx;
							height: 50rpx;
							box-sizing: border-box;
							background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/static/goods_price_bg.png);
							background-size: 100% 100%;
							padding: 5rpx;
							.title {
								font-family: alimama;
								font-size: 24rpx;
								width: 200rpx;
								font-weight: 500;
								position: absolute;
								// bottom: 0rpx;
								// padding: 10rpx;
								color: #010101;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}
							.price{
								position: absolute;
								bottom: 35rpx;
								right: 0rpx;
								width: 100rpx;
								text-align: center;
								.unit{
									font-size: 20rpx;
								}
								.number{
									font-size: 28rpx;
									font-weight: bold;
									margin-left: -2rpx;
									font-family: youshe;
								}
							}
						}
					}
					
			
					&.le-active {
						transform: scale(1);
					}
				}
			
			}
		}
		
		
	}
	
	.top-swiper-1{
		background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/static/banner_bg.png);
		background-size: 100% 100%;
		padding-top: 160rpx;
		
		.swiper {
			height: 300rpx;
			margin: 0 20rpx;
		
			.le-img {
				width: 100%;
				height: 100%;
				// width: 300rpx;
				// height: 300rpx;
				display: block;
				transform: scale(0.9);
				transition: transform 0.3s ease-in-out 0s;
				border-radius: 4px;
				
				.item-container {
					width: 220rpx;
					height: 280rpx;
					border: 2px solid #000;
					border-radius: 10rpx;
					box-sizing: border-box;
					overflow: hidden;
					box-shadow: 0px 14px 30px 0px rgba(226, 222, 204, 0.4);
					position: relative;
					background-color: #000;
					// position: relative;
					.thumb-c {
						position: relative;
						.thumb {
							width: 100%;
							border-radius: 10rpx;
							height: 280rpx;
							display: block;
						}
						
						.presell-c {
							position: absolute;
							width: 100%;
							text-align: center;
							background: rgba(230, 49, 17, 0.5);
							color: white;
							left: 0rpx;
							bottom: 0rpx;
							font-size: 24rpx;
							padding: 6rpx 0rpx;
						}
						
						.p-tag {
							position: absolute;
							width: 100rpx;
							height: 100rpx;
							top: 0rpx;
							
							// 右上角
							&.location-1 {
								right: 0rpx;
							}
							
							// 右上角
							&.location-2 {
								left: 0rpx;
							}
						}
					}
					
				
					.body {
						width: 220rpx;
						position: absolute;
						bottom: 0rpx;
						padding: 5rpx;
						height: 40rpx;
						box-sizing: border-box;
						// background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/static/index_price_bg.png);
						// background-size: 100% 100%;
						background-color: yellow;
						.title {
							font-family: alimama;
							font-size: 24rpx;
							width: 200rpx;
							font-weight: 500;
							position: absolute;
							line-height: 40rpx;;
							// bottom: 0rpx;
							// padding: 10rpx;
							color: #010101;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						.price{
							position: absolute;
							bottom: 35rpx;
							right: 0rpx;
							width: 100rpx;
							text-align: center;
							.unit{
								font-size: 20rpx;
							}
							.number{
								font-size: 28rpx;
								font-family: youshe;
								font-weight: bold;
								margin-left: -2rpx;
							}
						}
					}
				}
				
		
				&.le-active {
					transform: scale(1);
				}
			}
		
		}
	}
		
		
	
	
	
	
</style>
